<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<h3>收到的数据：</h3>
		<ul>
			<li>xiaoxi2： {{xiaoxi2}}</li>
			<li>money： {{money}}</li>
			<li>car： {{car}}</li>
		</ul>
		<button @click="showVc">输出School的vc</button>
		<button @click="xiaoxi = 333">尝试修改接收到的xiaoxi</button>
		<button @click="xiaoxi2 = 333">尝试修改自己维护的xiaoxi2</button>
		<button @click="car = {name:'奥迪',price:200000}">尝试修改接收到的car</button>
		<button @click="car.name = '丰田' ">尝试修改接收到的car的name</button>
	</div>
</template>

<script>
	export default {
		name:'School',

		//第一种写法（最简单的）：只是接收
		props:['xiaoxi','money','car'],

		//第二种写法：接收的同时做出：类型限制
		/* props:{
			xiaoxi:String,
			money:Number,
			car:Object,
		}, */

		//第三种写法：接收的同时做出：类型限制、必要性的限制、默认值的指定
		/* props:{
			xiaoxi:{
				type:String, //类型
				required:true, //必要性
				default:'生而为人，我很抱歉！' //默认值
			},
			money:{
				type:Number, //类型
				required:true, //必要性
				default:9 //默认值
			},
			car:{
				type:Object, //类型
				required:true, //必要性
				default(){ //默认值，此处注意，若是对象类型默认值要靠函数返回
					return {name:'奥拓',price:6000}
				} 
			}
		}, */

		data() {
			return {
				name:'尚硅谷',
				address:'宏福科技园',
				xiaoxi2:this.xiaoxi
			}
		},
		methods: {
			showVc(){
				console.log('School',this)
			}
		},
	}
</script>

<style>
	.school{
		background-color: orange;
		padding: 10px;
	}
</style>